<template>
  <el-drawer
    class="dia-style"
    :title="title"
    :visible.sync="open"
    width="60%"
    :close-on-click-modal="false"
    size="50%"
    :wrapper-closable="false"
    @close="cancel">
    <div class="drawer-container">
      <div class="hk-flex">
        <!-- <search-form
          :data="searchData"
          :field-list="fieldList"
          :list-type-info="dictList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery" /> -->
      </div>
      <div class="hk-flex-column">
        <hk-table
          :table-data="tableData"
          :table-columns="tableDataList"
          :show-pag="false"
          :loading="loading"
          show-index
          :rules="rules"
          is-need-index
          :dict-list="dictList"
          >
          <template #cght="scope">
            <span v-if="scope.row.row.fileUrl">
              <!-- {{ scope.row.row.fileUrl }} / -->
              {{ scope.row.row.fileName }}
            </span>
            <span v-else>
              <el-button type="text" style="display: block" @click="uploadFiles(scope.row.$index)">上传文件</el-button>
              <span>支持扩展名：.pdf .zip..</span>
            </span>
          </template>
        </hk-table>
      </div>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import SearchForm from '@/components/HkSearchform/index.vue'
import HkTable from '@/components/Hk-Table/index.vue'
import {poolNav,editPool} from '@/api/specialProject/workBench'
export default {
  components: { HkForm, SearchForm,HkTable },
  data() {
    return {
      title:'配置',
      open: false,
      searchData: {},
      fieldList: [{ label: '关键字', type: 'input', field: 'name', placeholder: '请输入单位名称', maxlength: 20 }],
      dictList: {},
      queryParams: {
        current: 1,
        size: 10,
      },
      loading: false,
      tableData: [],
      tableDataList: [
        { label: '任务名称', param: 'numType' },
        { label: '排序', param: 'sort', type: 'number',min:1,max:5 },
        { label: '状态', param: 'start', type: 'switch',width:'150',activeValue:'0',inactiveValue:'1' },
      ],
      rules:{}
    }
  },

  mounted() {},
  methods: {
    //  搜索
    handleQuery() {},
    // 重置
    resetQuery() {},
    submitForm() {
    let isCheck=  this.tableData.every(i=>{
        return i.sort
      })
      if(isCheck){
        let query=this.tableData.map(i=>{
          return {
            id:i.id,
            sort:i.sort,
            start:i.start
          }
        })
        editPool(query).then(res=>{
          this.$message.success('配置成功');
          this.$emit('handleSubmit')
          this.cancel()
        })
      }else{
        this.$message.error('请完善表单')
      }
    },
    //  显示
    show() {
      this.open = true
      this.getData()
    },
    // 获取列表数据
    getData(){
    poolNav().then(res=>{
      this.tableData=res
    })
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
  },
}
</script>

<style lang="scss" scoped>
.dark-theme {
  span {
    color: #fff !important;
  }
}
.hk-flex {
  align-items: flex-end;
}
.el-row {
  padding-bottom: 20px;
  margin-left: 20px;
}
.drawer-container {
  position: relative;
}
.sub-title {
  height: 20px;
  border-left: 2px solid #4b6eef;
  margin-bottom: 22px;

  span {
    margin-left: 8px;
  }
}

.ml10 {
  margin-left: 10px;
}

.mt40 {
  margin-top: 40px;
}
.drawer-container {
  padding: 0;
}
::v-deep {
  .el-upload--text {
    width: 100%;
  }
  .el-upload-dragger {
    width: 100%;
  }
  .el-upload--text {
    width: 100%;
  }
}
</style>
